<template>
	<div class="device-pie-box">
		<img src="../../assets/images/right2.png">
		<div class="title">
			设备统计
		</div>
		<div class="pie-box">
			<div ref="pie1" id="pie1"></div>
			<div ref="pie2" id="pie2"></div>
			<div ref="pie3" id="pie3"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.getData();
			// this.initHeartChart();
		},
		methods: {
			initEChart() {
				let self = this;
				self.pie1 = echarts.init(self.$refs.pie1);
				self.option1 = {
					title: {
						text: '在线设备数量',
						bottom: '10%',
						left: 'center',
						textStyle: {
							color: '#ffffff',
							fontSize: '12'
						}
					},
					tooltip: {
						trigger: 'item'
					},
					series: [{
						type: 'pie',
						radius: ['50%', '65%'],
						center: ['50%', '40%'],
						label: {
							show: true,
							position: 'center',
							formatter: '75/79',
							textStyle: {
								color: '#ffffff',
								fontSize: '16'
							},
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [{
										c2: 'rgba(97, 186, 255, 1)',
										c1: 'rgba(155, 81, 255, 1)'
									}, {
										c1: 'rgba(26, 54, 144, 1)',
										c2: 'rgba(26, 54, 144, 1)'
									}]
									return new echarts.graphic.LinearGradient(1, 1, 1, 0,
										[{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										}, {
											offset: 1,
											color: colorList[params.dataIndex].c2
										}])

								}
							}
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 16,
								fontWeight: 'bold'
							},
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 75,
								name: 'Search Engine',
								itemStyle: {
									normal: {
										borderRadius: 4,
									}
								},
							}, {
								value: 20,
								name: 'Direct',
							}

						]
					}]
				}
				self.pie1.setOption(self.option1);

				self.pie2 = echarts.init(self.$refs.pie2);
				self.option2 = {
					title: {
						text: '使用中设备数量',
						bottom: '10%',
						left: 'center',
						textStyle: {
							color: '#ffffff',
							fontSize: '12'
						}
					},
					tooltip: {
						trigger: 'item'
					},
					series: [{
						type: 'pie',
						radius: ['50%', '65%'],
						center: ['50%', '40%'],
						label: {
							show: true,
							position: 'center',
							formatter: '75/79',
							textStyle: {
								color: '#ffffff',
								fontSize: '16'
							},
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [{
										c2: 'rgba(97, 186, 255, 1)',
										c1: 'rgba(155, 81, 255, 1)'
									}, {
										c1: 'rgba(26, 54, 144, 1)',
										c2: 'rgba(26, 54, 144, 1)'
									}]
									return new echarts.graphic.LinearGradient(1, 1, 1, 0,
										[{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										}, {
											offset: 1,
											color: colorList[params.dataIndex].c2
										}])

								}
							}
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 16,
								fontWeight: 'bold'
							},
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 75,
								name: 'Search Engine',
								itemStyle: {
									normal: {
										borderRadius: 4,
									}
								},
							}, {
								value: 20,
								name: 'Direct',
							}

						]
					}]
				}
				self.pie2.setOption(self.option2);

				self.pie3 = echarts.init(self.$refs.pie3);
				self.option3 = {
					title: {
						text: '设备异常数量',
						bottom: '10%',
						left: 'center',
						textStyle: {
							color: '#ffffff',
							fontSize: '12'
						}
					},
					tooltip: {
						trigger: 'item'
					},
					series: [{
						type: 'pie',
						radius: ['50%', '65%'],
						center: ['50%', '40%'],
						label: {
							show: true,
							position: 'center',
							formatter: '23/79',
							textStyle: {
								color: '#ffffff',
								fontSize: '16'
							},
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [{
										c2: 'rgba(97, 186, 255, 1)',
										c1: 'rgba(155, 81, 255, 1)'
									}, {
										c1: 'rgba(26, 54, 144, 1)',
										c2: 'rgba(26, 54, 144, 1)'
									}]
									return new echarts.graphic.LinearGradient(1, 1, 1, 0,
										[{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										}, {
											offset: 1,
											color: colorList[params.dataIndex].c2
										}])

								}
							}
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 16,
								fontWeight: 'bold'
							},
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 75,
								name: 'Search Engine',
								itemStyle: {
									normal: {
										borderRadius: 4,
									}
								},
							}, {
								value: 23,
								name: 'Direct',
							}

						]
					}]
				}
				self.pie3.setOption(self.option3);
				
				window.onresize = () => {
					setTimeout(() => {
						self.pie1.resize();
						self.pie2.resize();
						self.pie3.resize();
					})
				}
			},
			// 获取后台的统计数据
			getData() {
				this.initEChart();
				this.$nextTick(() => {
					this.initEChart();
				})
			},
		}
	}
</script>

<style>
</style>
